<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                template="/template/OutletManagementTemplate.xhtml">

    <ui:define name="contentInsert">

        <p:panel id="addAreaPanel">
            <p:ajaxStatus style="width:20px;height:20px;">
                <f:facet name="start">
                    <h:graphicImage value="http://www.primefaces.org:8080/showcase/design/ajaxloading.gif" />
                </f:facet>
                <f:facet name="complete">
                    <h:outputText value="" />
                </f:facet>
            </p:ajaxStatus>
            <p:messages id="msg"/>

            <h:form id="addAreaForm">

                <h:panelGrid columns="2">
                    <f:facet name="header">
                        <h:outputLabel value="Add new area: " 
                                       style=" font-weight: bold; text-align: center"/>
                    </f:facet>

                    <h:outputLabel value="Area name: "/>
                    <p:inputText id="areaName" value="#{areaMgmtBean.areaName}"  
                                 required="true" style="width:45%;"/>
                    <p:message for="areaName"/><br/>

                    <h:outputText value="Upload Image: "/><br/>
                    <h:form enctype="multipart/form-data" prependId="false">
                        <p:growl id="growl2" showDetail="true" life="2000"></p:growl> 
                        <p:fileUpload fileUploadListener="#{photoManagedBean.handlePhotoUpload}" multiple="false" label="Browse" auto="true" allowTypes="*.jpg;*.png;*.gif;" description="Images" update="addAreaForm:pic" />
                    </h:form>
                    <br/><br/>
                    <h:outputLabel for="pic" value="Preview Image: "/> 
                    <br/><br/>
                    <p:graphicImage id="pic" value="#{photoManagedBean.photoFilePath}" height="100"
                                    width="100"/><br/><br/>
                    <h:outputLabel value="Number of Diners: "
                                   style="width:50%"/>
                    <p:inputText value="#{areaMgmtBean.aNumDiner}"/>
                    <br/>
                    <h:outputLabel value="Please enter with the form [1,2,3]"/>
                    <br/>


                </h:panelGrid>
                <p:commandButton id="submitNewArea" value="Submit" update="msg,dataTableForm:areaList"
                                 actionListener="#{areaMgmtBean.addArea}" />
            </h:form>
        </p:panel>

        <br/>
        <br/>

        <h:form id="dataTableForm">
            <p:dataTable id="areaList" var="area" 
                         value="#{areaMgmtBean.getAllAreas()}" dynamic="true" 
                         emptyMessage="No areas have been added"
                         rowEditListener="#{areaMgmtBean.onRowEdit}">
                <f:facet name="header">
                    Existing areas
                </f:facet>
                <p:column sortBy="#{area.id}" headerText="Id"> 
                    <h:outputText value="#{area.id}"/>
                </p:column> 

                <p:column sortBy="#{area.areaName}" headerText="Name"> 
                    <p:cellEditor>  
                        <f:facet name="output">  
                            <h:outputText value="#{area.areaName}"/>
                        </f:facet>
                        <f:facet name="input">
                            <p:inputText style="width:90%" value="#{area.areaName}"/>
                        </f:facet>
                    </p:cellEditor>
                </p:column> 

                <p:column headerText="Image"> 
                    <p:graphicImage value =" #{area.pathName}" width="100" height="100"/>
                </p:column> 

                <p:column headerText="Number Diners Allowed"
                          style="width:10%">
                    <p:cellEditor>  
                        <f:facet name="output">  
                            <h:outputText value="#{area.numDinersStr}"/>
                        </f:facet>
                        <f:facet name="input">
                            <p:inputText style="width:90%" value="#{area.numDinersStr}"/>
                        </f:facet>
                    </p:cellEditor>
                </p:column>
                <p:column headerText="Edit" style="width:5px">
                    <p:rowEditor />
                </p:column>
                <p:column headerText="Delete" style="width:8px">
                    <p:commandButton id="removeArea" image="ui-icon ui-icon-trash" ajax="false"
                                     update="display" actionListener="#{areaMgmtBean.removeArea}"
                                     onclick="areaEdit.remove()">
                        <f:attribute name="areaId" value="#{area.id}" /> 
                    </p:commandButton>
                </p:column>
            </p:dataTable>
        </h:form>
    </ui:define>
</ui:composition>
